<template>
  <div class="custom-menu-edit-con">
    <div class="form-group placeholders" style="width: 30%; float:right ">
      <label
        class="control-label col-xs-3 col-sm-3 col-md-3 no-padding-right phonelabel"
        for="appIdcode"
        >服务号:</label
      >
      <div
        class="col-xs-8 col-sm-8 col-md-8 placeholder input-group input-group-sm"
      >
        <select id="appIdcode" class="form-control" name="appIdcode">
          <option value="wx6d464222e2572d67">GYVW</option>
          <option value="wxa40fd733fd63e57b">kx</option>
          <option value="wxc2c420fe6bf447fe">半个柠檬c</option>
          <option value="wxd2a2b89fae362185">fans</option>
        </select>
      </div>
    </div>
    <div class="hbox">
      <div class="inner-left">
        <div class="custom-menu-view-con">
          <div class="custom-menu-view">
            <div class="custom-menu-view__title">GYVW</div>
            <div class="custom-menu-view__body">
              <div class="weixin-msg-list"><ul class="msg-con"></ul></div>
            </div>
            <div id="menuMain" class="custom-menu-view__footer">
              <div class="custom-menu-view__footer__left"></div>
              <div class="custom-menu-view__footer__right">
                <div
                  class="custom-menu-view__menu"
                  alt="0"
                  style="width: 33.3333%;"
                >
                  <div class="text-ellipsis"></div>
                  <ul class="custom-menu-view__menu__sub">
                    <li
                      class="custom-menu-view__menu__sub__add subbutton__actived"
                      id="sub_0_0"
                    >
                      <div class="text-ellipsis">新建子菜单</div>
                    </li>
                    <li class="custom-menu-view__menu__sub__add">
                      <div class="text-ellipsis">
                        <i class="glyphicon glyphicon-plus text-info"></i>
                      </div>
                    </li>
                  </ul>
                </div>
                <div
                  class="custom-menu-view__menu"
                  alt="1"
                  style="width: 33.3333%;"
                >
                  <div class="text-ellipsis">新建菜单</div>
                  <ul class="custom-menu-view__menu__sub">
                    <li class="custom-menu-view__menu__sub__add">
                      <div class="text-ellipsis">
                        <i class="glyphicon glyphicon-plus text-info"></i>
                      </div>
                    </li>
                  </ul>
                </div>
                <div class="custom-menu-view__menu" style="width: 33.3333%;">
                  <div class="text-ellipsis">
                    <i class="glyphicon glyphicon-plus text-info iBtn"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="inner-right">
        <div class="cm-edit-after" style="display: block;">
          <div class="cm-edit-right-header b-b">
            <span id="cm-tit">新建子菜单</span>
            <a id="delMenu" class="pull-right" href="javascript:;">删除菜单</a>
          </div>
          <form class="form-horizontal wrapper-md" name="custom_form">
            <div class="form-group">
              <label class="col-sm-2 control-label">菜单名称:</label>
              <div class="col-sm-5">
                <input
                  name="custom_input_title"
                  type="text"
                  class="form-control"
                  ng-model="menuname"
                  value=""
                  placeholder=""
                  ng-maxlength="5"
                />
              </div>
              <div class="col-sm-5 help-block">
                <div
                  ng-show="custom_form.custom_input_title.$dirty&amp;&amp;custom_form.custom_input_title.$invalid-maxlength"
                >
                  字数不超过5个汉字或16个字符
                </div>
                <div class="font_sml" style="display: block;">
                  若无二级菜单，可输入20个汉字或60个字符
                </div>
              </div>
            </div>
            <div class="form-group" id="radioGroup" style="display: block;">
              <label class="col-sm-2 control-label">菜单内容:</label>
              <div class="col-sm-10 LebelRadio">
                <label class="checkbox-inline">
                  <input
                    type="radio"
                    name="radioBtn"
                    value="sendmsg"
                    checked=""
                  />
                  发送消息
                </label>
                <label class="checkbox-inline">
                  <input type="radio" name="radioBtn" value="link" />
                  跳转网页
                </label>
              </div>
            </div>
          </form>
          <div class="cm-edit-content-con" id="editMsg" style="display: block;">
            <div class="editTab">
              <div class="editTab-heading">
                <ul id="clickUl" class="msg-panel__tab">
                  <li
                    id="imgtextLi"
                    class="msg-tab_item on"
                    onclick="imageText()"
                  >
                    <span class="msg-icon msg-icon-tuwen"></span>
                    图文消息
                  </li>
                  <li id="imgLi" class="msg-tab_item" onclick="picture()">
                    <span class="msg-icon msg-icon-pic"></span>
                    图片
                  </li>
                  <li id="voice" class="msg-tab_item" onclick="voice()">
                    <span class="msg-icon msg-icon-audio"></span>
                    语音
                  </li>
                  <li id="video" class="msg-tab_item" onclick="video1()">
                    <span class="msg-icon msg-icon-video"></span>
                    视频
                  </li>
                </ul>
              </div>
              <div class="editTab-body">
                <div class="msg-panel__context">
                  <div class="msg-context__item">
                    <div
                      class="msg-panel__center msg-panel_select"
                      data-toggle="modal"
                      data-target="#selectModal"
                    >
                      <span class="message-plus">+</span>
                      <br />
                      从素材库中选择
                    </div>
                  </div>
                  <div class="msg-template" style="display: none;"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="cm-edit-content-con" id="editPage" style="display: none;">
            <div class="cm-edit-page">
              <div class="row">
                <label class="col-sm-6 control-label" style="text-align: left;"
                  >粉丝点击该菜单会跳转到以下链接:</label
                >
              </div>
              <div class="row">
                <label class="col-sm-2 control-label" style="text-align: left;"
                  >页面地址:</label
                >
                <div class="col-sm-5">
                  <input
                    type="text"
                    name="url"
                    class="form-control"
                    placeholder="认证号才可手动输入地址"
                  />
                  <span class="help-block">必填,必须是正确的URL格式</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="cm-edit-before" style="display: none;">
          <h5>点击左侧菜单进行操作</h5>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "WechatMPCustomMenu",
  computed: {},
  data() {
    return {
      test: ""
    };
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>

<style type="text/css">
.custom-menu-edit-con {
  position: relative;
  padding: 20px;
}
.hbox {
  display: table;
  table-layout: fixed;
  border-spacing: 0;
  width: 100%;
}

.inner-left {
  width: 380px;
  padding: 0 !important;
  display: table-cell;
  vertical-align: top;
  height: 100%;
  padding: 0;
  float: none;
  border-left: 1px solid #dee5e7;
  border-bottom: 1px solid #dee5e7;
  border-top: 1px solid #dee5e7;
  position: relative;
}
.inner-right {
  position: relative;
  background: #f3f4f8;
  padding: 0 !important;
  display: table-cell;
  vertical-align: top;
  height: 100%;
  padding: 0;
  float: none;
  border-left: 1px solid #dee5e7;
  border-bottom: 1px solid #dee5e7;
  border-right: 1px solid #dee5e7;
  border-top: 1px solid #dee5e7;
}

.custom-menu-view-con {
  width: 309px;
  height: 506px;
  position: relative;
  margin: 50px auto;
}
.custom-menu-view {
  height: 100%;
  border: 1px solid #dedede;
}
.custom-menu-view__title {
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #323232;
  color: #fff;
}
.custom-menu-view__body {
  position: absolute;
  top: 40px;
  left: 1px;
  right: 1px;
  bottom: 50px;
  background: #f2f2f2;
  overflow: auto;
  border-bottom: 1px solid #dee5e7;
  border-top: 1px solid #dee5e7;
}
.weixin-msg-list {
  height: 100%;
  width: 100%;
}
.weixin-msg-list .msg-con {
  list-style: none;
  padding: 0;
  margin: 0;
}

.custom-menu-view__footer {
  position: absolute;
  height: 50px;
  bottom: 0;
  left: 0;
  right: 0;
}
.custom-menu-view__footer__left {
  position: absolute;
  width: 40px;
  top: 0;
  bottom: 0;
  left: 0;
  border-right: 1px solid #dee5e7;
  background: url("~@/assets/images/keyboard.png");
  background-repeat: no-repeat;
  background-position: center;
}
.custom-menu-view__footer__right {
  position: absolute;
  left: 40px;
  right: 0;
  top: 0;
  bottom: 0;
  font-size: 13px;
}

.custom-menu-view__menu {
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-right: 1px solid #dee5e7;
  position: relative;
  cursor: pointer;
  float: left;
  width: 33.3333%;
}

.text-ellipsis {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-ellipsis i {
  display: block;
  padding: 19px 0;
  width: 100%;
}

.custom-menu-view__menu__sub {
  left: 4px;
  right: 4px;
  position: absolute;
  bottom: 60px;
  border: 1px solid #dee5e7;
  border-radius: 5px;
  list-style: none;
  padding: 0;
  margin: 0;
  background: #fff;
  font-size: 10px;
}
.custom-menu-view__menu__sub li {
  position: relative;
  height: 50px;
  line-height: 50px;
  cursor: pointer;
  padding: 0;
  border-bottom: 1px solid #dee5e7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.custom-menu-view__menu__sub:last-child {
  border-bottom: 0;
}
.custom-menu-view__menu__sub:after {
  bottom: -4px;
  display: inline-block;
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -6px;
  width: 0;
  height: 0;
  border-width: 6px;
  border-style: dashed;
  border-color: transparent;
  border-bottom-width: 0;
  border-top-style: solid;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 5px solid #fff;
}

.custom-menu-view .button__actived,
.custom-menu-view .subbutton__actived {
  border: 1px solid #23b7e5 !important;
  z-index: 1;
}

.custom-menu-view__menu__sub li:hover {
  background: #ededed;
}

.inner-right {
  position: relative;
  background: #f3f4f8;
  padding: 0 !important;
  display: table-cell;
  vertical-align: top;
  height: 100%;
  padding: 0;
  float: none;
  border-left: 1px solid #dee5e7;
  border-bottom: 1px solid #dee5e7;
  border-right: 1px solid #dee5e7;
  border-top: 1px solid #dee5e7;
  color: #58666e;
}
.cm-edit-before {
  position: absolute;
  text-align: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.cm-edit-before:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  font-size: 0;
}
.cm-edit-before h5 {
  display: inline-block;
  color: #98a6ad;
}
.cm-edit-right-header {
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  border-bottom: 1px solid #dee5e7;
}
.cm-edit-right-header a {
  color: #31708f;
}
.cm-edit-right-header a:hover {
  text-decoration: none;
}
.wrapper-md {
  padding: 20px;
}

.help-block {
  display: block;
  margin-bottom: 10px;
  color: #a3a3a3;
  margin: 0;
  padding-top: 5px;
  font-size: 13px;
}

.wrapper-md label {
  font-weight: normal;
}

.editTab {
  /*margin: 0px 15px;*/
}

.Input_Box {
  width: 100%;
  min-height: 160px;
  background-color: #fff;
  overflow: hidden;
}

.Input_text {
  width: 100%;
  height: 256px;
  padding: 5px;
  outline: none;
  border: 0px solid #fff;
  resize: none;
  font: 13px "微软雅黑", Arial, Helvetica, sans-serif;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.Input_Foot {
  width: 100%;
  height: 40px;
  border-top: 1px solid #ccc;
  background-color: #fff;
  -moz-border-radius: 0 0 5px 5px;
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
  position: relative;
  bottom: 0;
}

.imgBtn {
  float: left;
  text-decoration: none;
  margin-top: 8px;
  margin-left: 10px;
  text-align: center;
  background-repeat: no-repeat;
  background-position: 0 -13px;
  height: 18px;
  width: 20px;
  cursor: pointer;
}

.imgBtn:active {
  margin-top: 9px;
}

.imgBtn:hover {
  background-position: 0 -31px;
}

.postBtn {
  float: right;
  font: 13px "微软雅黑", Arial, Helvetica, sans-serif;
  color: #808080;
  padding: 9px 20px 7px 20px;
  border-left: 1px solid #ccc;
  cursor: pointer;
  -moz-border-radius: 0 0 5px 0;
  -webkit-border-radius: 0 0 5px 0;
  border-radius: 0 0 5px 0;
}

.postBtn:hover {
  color: #333;
  background-color: #efefef;
}

.postBtn:active {
  padding: 10px 20px 6px 20px;
}

.faceDiv {
  width: 100%;
  position: relative;
  display: none;
  background-color: #fff;
  width: 421px;
}

.faceDiv > .emoji_container > section > ._img img {
  position: relative;
  cursor: pointer;
  padding: 1px;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  margin-left: 2px;
}

.faceDiv > .emoji_container > section > ._img img:active {
  border: 1px solid transparent;
}

.faceDiv > img:hover {
  background-color: #efefef;
}

.faceDiv > img:active {
  padding: 4px 3px 2px 3px;
}

.emoji_tab {
  position: relative;
  border-top: 1px solid gray;
  height: 2em;
  line-height: 2em;
  white-space: nowrap;
  overflow-x: auto;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
}

.emoji_tab a {
  display: inline-block;
  text-decoration: none;
  height: 1em;
  line-height: 1em;
  padding: 0.2em 0.5em;
  background-color: gray;
  box-shadow: 1px 1px 3px gray;
  border-radius: 5px;
  margin: 0 0.2em;
}

.emoji_container {
  height: 150px;
  overflow: auto;
}

.emoji_container section {
  display: none;
  overflow: hidden;
  border-top: 1px solid #c0bfc5;
  border-right: 1px solid #c0bfc5;
  width: 421px;
}
.emoji_container section a {
  overflow: hidden;
  display: block;
  float: left;
  width: 28px;
  height: 28px;
  border-left: 1px solid #c0bfc5;
  border-bottom: 1px solid #c0bfc5;
}
.emoji_container section a:last-child {
  border-right: 1px solid #c0bfc5;
}

.msg-panel__tab {
  width: 100%;
  height: 48px;
  margin: 0;
  color: #cbcbcb;
  padding: 0;
  box-sizing: border-box;
  background-color: #fff;
  border-bottom: 2px solid #e9e9e9;
}
.msg-panel__tab .msg-tab_item {
  display: inline-block;
  font-size: 12px;
  width: 100px;
  line-height: 48px;
  text-align: center;
  vertical-align: middle;
  position: relative;
}
.msg-panel__tab .msg-tab_item:hover {
  cursor: pointer;
}
.msg-panel__tab .on {
  background: #e9e9e9;
  color: #000;
}
.msg-panel__tab .msg-icon-word {
  background: url("~@/assets/images/message.png") -204px 0 no-repeat;
  height: 21px;
  width: 18px;
}
.msg-panel__tab .msg-icon-pic {
  background: url("~@/assets/images/message.png") -222px 0 no-repeat;
  height: 20px;
  width: 20px;
}
.msg-panel__tab .msg-icon-audio {
  background: url("~@/assets/images/message.png") -189px 0 no-repeat;
  height: 21px;
  width: 15px;
}
.msg-panel__tab .msg-icon-video {
  background: url("~@/assets/images/message.png") -242px 0 no-repeat;
  height: 20px;
  width: 20px;
}
.msg-panel__tab .msg-icon-tuwen {
  background: url("~@/assets/images/message.png") -262px 0 no-repeat;
  height: 20px;
  width: 24px;
}
.msg-panel__tab .msg-icon {
  display: inline-block;
  position: relative;
  top: 5px;
  margin-right: 5px;
}
/* www.datouwang.com */
.Input_wraper {
  width: 100%;
  height: 256px;
  padding-right: 12px;
  overflow: hidden;
}

.msg-panel__context {
  width: 100%;
  box-sizing: border-box;
  min-height: 296px;
  padding: 0;
  position: relative;
  list-style: none;
  background: #fff;
  height: 355px;
  overflow: auto;
  margin-top: 5px;
}
.msg-panel__context .msg-context__item {
  border: 1px dotted #e9e9e9;
  height: 254px;
  width: 47%;
  float: left;
  margin-right: 1.5%;
  margin-left: 1.5%;
  text-align: center;
  position: relative;
}
.msg-panel__context .msg-template {
  display: none;
  margin-right: 1.5%;
  margin-left: 1.5%;
  width: 47%;
  position: relative;
}
.msg-panel__context .del-tuwen {
  left: 332px;
  top: 1px;
}
.msg-panel__context .msg-panel__del:hover {
  cursor: pointer;
}
.msg-panel__context .msg-panel__del {
  position: absolute;
  width: 40px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #00a2ff;
  border-radius: 8px;
  border: 1px solid #17acff;
  text-decoration: none;
  background-color: aliceblue;
}

.msg-panel__context .msg-context__item .msg-panel__center {
  width: 150px;
  height: 80px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -75px;
  margin-top: -40px;
}
.msg-panel__context .msg-context__item .msg-panel_select {
  cursor: pointer;
}
.msg-panel__context .msg-context__item .message-plus {
  font-size: 30px;
  color: #00a2ff;
  margin-top: 30px;
  position: relative;
}
.msg-panel__context .msg-context__item .message-plus a.btn {
  position: relative;
  z-index: 1;
}
.msg-panel__context .msg-context__item .input_file {
  filter: alpha(opacity=0);
  opacity: 0;
  width: 85px;
  height: 30px;
  position: absolute;
  top: 0px;
  left: 33px;
  z-index: 3;
}
.msg-panel__context .msg-context__item i {
  color: #00a2ff;
}

.msg-panel__context .msg-context__item:hover {
  border-color: #000;
}

#selectModal h4 {
  text-align: center;
  color: #58666e;
  font-size: 14px;
}
#selectModal .modal-header,
#selectModal .modal-footer {
  background: #f4f5f9;
}
#selectModal .modal-body {
  overflow-y: auto;
  height: 450px;
}
#selectModal .panel {
  position: relative;
  cursor: pointer;
}
.mask-bg {
  position: absolute;
  z-index: 1111;
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  display: none;
}
.mask-bg .mask-icon {
  height: 100%;
  position: relative;
}
.mask-bg i {
  color: #fff;
  font-size: 24px;
  width: 25px;
  height: 25px;
  display: table-cell;
  position: absolute;
  margin: auto;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  text-align: center;
  vertical-align: middle;
}
/*#selectModal .modal-body img{display: block;width: 120px;height:120px;margin:0 auto;}
	#selectModal .modal-body p{
	    text-align: center;
	    margin-top: 5px;
	}*/

.cm-edit-content-con {
  background: #fff;
  min-height: 300px;
  margin: 0 15px;
  border: 1px solid #dee5e7;
}
.cm-edit-content-con .cm-edit-page {
  padding: 20px;
}
.cm-edit-content-con .cm-edit-page .row {
  margin-bottom: 10px;
}
.cm-edit-content-con .cm-edit-page .row label {
  font-weight: normal;
}

#editPage {
  display: none;
}

.cm-edit-footer {
  margin-bottom: 20px;
  text-align: center;
}
.btn-info1 {
  color: #fff !important;
  background-color: #138ed4;
  border-color: #138ed4;
}

#sortBtnc {
  display: none;
}
</style>
